<template>
  <div class="container-song-list">
    <x-tabs
      v-model="current"
      @change="handleChange"
      :list="[
        { label: '华语', id: 0 },
        { label: '粤语', id: 1 }
      ]"
      :config="{ type: 'card', tabPosition: 'top' }"
    >
      <panel-list :list="dataList" type="1"></panel-list>
    </x-tabs>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import * as axiosApi from './api'
export default {
  setup() {
    const _data = reactive({
      current: 0,
      dataList: []
    })
    handleChange(_data.current)
    function handleChange(id) {
      axiosApi.getSonglists({ style: id }).then(res => {
        _data.dataList=res.data.content.map(item=>{
          return {
            id:item.songlistNo,
            url:item.songListImg,
            description:item.description
          }
        })
      })
    }
    return {
      ...toRefs(_data),
      handleChange
    }
  }
}
</script>

<style lang="scss" scoped>
.container-song-list {
}
</style>
